<template>
  <!-- 二维码登入 -->
  <div class="qrCode">
    <div class="img" v-loading="loading">
      <!-- 展示二维码 -->
      <img alt="" width="250px" height="250px" :src="qrImg" class="qrImg" />
      <!-- 遮罩，在二维码显示出错时显示 -->
      <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
    </div>
    <p class="p">
      <!-- 阿里图标symbol引入的固定标签 -->
      <svg aria-hidden="true" class="icon-wx">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <b>扫描二维码</b>
    </p>
  </div>
</template>

<script>
//引入socket.io
import socketIo from "socket.io-client";
//引入qrcode
import qrcode from "qrcode";
//引入api
import * as api from "@/api/users";
//引入成功和失败扫码遮罩图片
import invalidQrImg from "@/assets/img/invalidQr.png";
import scanSuccessImg from "@/assets/img/scanCode.png";
import storage from "@/utils/storages";
export default {
  props: {
    storageUserInfo: {
      required: true
    }
  },
  data() {
    return {
      loading: false,
      //二维码图片
      qrImg: "",
      //是否显示遮罩
      showQrMask: false,
      //遮罩背景样式
      maskBg: {
        backgroundImage: `url(${scanSuccessImg})`,
        backgroundSize: `cover`
      } //扫码成功
      // maskBgInvalid: {
      //   background: url(invalidQrImg)
      // } //二维码失效
    };
  },
  created() {
    console.log(this.storageUserInfo);
    //建立socket连接
    let io = socketIo("wss://chst.vip");
    //监听连接的事件
    io.on("connectSuccess", async ({ sid }) => {
      //将sid存到本地
      storage.set("sid", sid);
      this.getQrUrl(sid);
    });
    //无效的二维码
    io.on("invalidCode", (data) => {
      // console.log(data);
      //展示遮罩
      this.showQrMask = true;
      //显示无效的二维码遮罩样式
      this.maskBg.backgroundImage = `url(${invalidQrImg})`;
    });
    //扫码成功
    io.on("scancodeSuccess", async ({ state, wechatCode, mag }) => {
      //扫码成功显示遮罩
      this.showQrMask = true;
      this.maskBg.backgroundImage = `url(${scanSuccessImg})`;
      if (state) {
        //调用微信登入接口
        let res = await api.wechatLoginApi(wechatCode);
        //将内容存到本地
        this.storageUserInfo(res.data);
        //跳转页面
        this.$router.push("/");
        // console.log(res);
      } else {
        console.error(mag);
      }
    });
  },
  methods: {
    async getQrUrl(sid) {
      //打开加载动画
      this.loading = true;
      //请求获取二维码地址
      let res = await api.getQrcodeApi(sid);
      // console.log(res);
      let { scanCodeUrl: qrcodeUrl } = res.data;
      //通过qrcode插件生成二维码
      qrcode.toDataURL(qrcodeUrl, (err, img) => {
        if (err) {
          throw err;
        }
        // console.log(img);
        this.qrImg = img;
        //关掉遮罩
        this.showQrMask = false;
        this.loading = false;
      });
    },
    //更新二维码地址
    updateQr() {
      //获取本地存储的sid
      let sid = storage.get("sid");
      console.log(sid);
      //重新请求
      this.getQrUrl(sid);
    }
  }
};
</script>

<style scoped lang="less">
.icon-wx {
  width: 20px;
  height: 20px;
  margin-left: 150px;
  vertical-align: top;
  margin-right: 10px;
}
.qrCode {
  position: absolute;
  top: 150px;
  width: 300px;
  height: 300px;
  // background-color: aqua;
  margin-left: 80px;
  .img {
    position: relative;
    left: 20px;
    width: 250px;
    height: 250px;
    // background-color: pink;
    .qrImg {
      position: relative;
    }
    .mask {
      background-color: white;
      opacity: 0.8;
      position: absolute;
      left: 0;
      top: 0;
      width: 250px;
      height: 250px;
    }
  }
  .p {
    position: relative;
    top: 50px;
    left: -60px;
    // bottom: 5px;
  }
}
</style>
